<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1" name="viewport" />
    <title>测试页面</title>
    <link href="css/draggable.css" media="screen" rel="stylesheet" />
    <link href="css/ui-dialog.css" media="screen" rel="stylesheet" />
    <link rel="stylesheet/less" href="css/popover.less" />
</head>
<body>
    <div class="clearfix" id="main-body">
        <div class="leftbox padding-top">
            <ul id="leftmenu">
                <li class="header">添加组件</li>
                <li id="add-ShopInfo">店铺信息</li>
                <li id="add-goods">商品列表</li>
                <li id="add-txt-header">文本导航</li>
                <li id="add-footerMenu">底部菜单</li>
                <li>图片导航</li>
                <li>橱窗</li>
                <li id="add-mobileVerify">短信验证</li>
                <li id="add-location">选择地址</li>

            </ul>
        </div>
        <div class="leftbox">
            <div id="mobile">
                <div id="mobile-hearder"></div>
                <div id="mobile-body">

                    <div class="page-title module" data-appid="pageTitle">
                    	
                    </div>
                    <div id="drag-wrap"></div>
	                <div id="mobile-footer" class="module" data-appid="mobileFooter"></div>
                </div>
            </div>
            <div class="footer"></div>
        </div>
        <!-- popover begin -->
        <div id="popover">
        	<div class="popover-inner">

        	</div>
        </div>
        <!-- popover end -->
    </div>
    <div class="tmpl-container">
        <div id="header">
            <div class="shopheader module" data-appid="shopHeader">
                <div class="info clearfix">
                    <div class="log"></div>
                    <div class="infotxt">XXXX的店铺
                        <br />触动你的心，成就你们梦想</div>
                </div>
            </div>
        </div>
        <div id="txt-header">
            <div class="module" data-appid="txtHeader">
                <ul class="txt-header clearfix">
                    <li>生活改良</li>
                    <li>办公文具</li>
                    <li>文化装饰</li>
                    <li>个性装备</li>
                </ul>
            </div>
        </div>
        <div id="goods">
            <div class="goods module" data-appid="goods">
                <ul class="hidden" id="goods-big">
                    <li>第一个商品</li>
                    <li>第二个商品</li>
                    <li>第三个商品</li>
                </ul>
                <ul class="clearfix hidden" id="goods-small">
                    <li>第一个商品</li>
                    <li>第二个商品</li>
                    <li>第三个商品</li>
                    <li>第四个商品</li>
                </ul>
                <ul class="clearfix hidden" id="goods-three">
                    <li>第一个商品</li>
                    <li>第二个商品</li>
                    <li>第三个商品</li>
                </ul>
                <ul id="goods-list">
                    <li>
                        <div class="good-image">第二个商品</div>
                        <div class="good-txt">
                            <p class="up">此处显示商品名称</p>
                            <p class="down">￥6.0</p>
                        </div>
                    </li>
                    <li>
                        <div class="good-image">第二个商品</div>
                        <div class="good-txt">
                            <p class="up">此处显示商品名称</p>
                            <p class="down">￥6.0</p>
                        </div>
                    </li>
                    <li>
                        <div class="good-image">第二个商品</div>
                        <div class="good-txt">
                            <p class="up">此处显示商品名称</p>
                            <p class="down">￥6.0</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div id="footerMenu">
            <ul class="nav clearfix">
                <li>购物车</li>
                <li>购物车</li>
                <li>购物车</li>
                <li>购物车</li>
            </ul>
        </div>
        <div id="mobile-verify">
            <div class="mobile-verify">
                <div class="form-group">
                    <div class="form-control clearfix">
                        <div class="input fl"></div>
                        <span class="btn fl yz">获取验证码</span>
                    </div>
                    <div class="form-control">
                        <div class="input"></div>
                    </div>
                    <div class="form-control txt-center">
                        <span class="btn btn-lg">立即领取</span>
                    </div>
                </div>
            </div>
        </div>
        <div id="location" data-appid="location">
            <div class="location">
                <div class="item hd">上海 ></div>
                <div class="item">黄浦区</div>
                <div class="item">卢湾区</div>
                <div class="item">徐汇区</div>
                <div class="item">长宁区</div>
                <div class="item">静安寺</div>
                <div class="item">普陀区</div>
                <div class="item">闸北区</div>
                <div class="item">虹口区</div>
            </div>
        </div>
    </div>
    <div id="popoverContent">
    	<!-- 页面标题 -->
    	<div class="pageTitle">
    		<form action="">
    			<div class="control-group">
    				<label for="" class="control-label">页面名称：</label>
    				<div class="control">
    					<input class="input-l" type="text" value="我的微店" />
    				</div>
    			</div>
    		</form>    		
    	</div>
    	<!-- 店铺信息 -->
    	<div class="shopHeader">
    		<form action="">			
    			<div class="control-group">
    				<label for="" class="control-label">店铺标题：</label>
    				<div class="control">
    					<input class="input-l" type="text" value="显示店铺的名称" />
    				</div>
    			</div>
    			<div class="control-group">
    				<label for="" class="control-label">店铺描述：</label>
    				<div class="control">
    					<input class="input-l" type="text" value="一句短语描述店铺" />
    				</div>
    			</div>
    		</form>    		
    	</div>
    	<!-- 文本导航 -->
    	<div class="txtHeader">
    		<form action="">
				<h1>txtHeader</h1>	
    		</form>    		
    	</div>    
    	<!-- 商品列表 -->
    	<div class="goods">
    		<form action="">
    			<div class="control-group">
    				<label for="" class="control-label">显示方式：</label>
    				<div class="control">
    					<label for="" class="radio inline"><input type="radio" name="size" value="0" />大图</label>
    					<label for="" class="radio inline"><input type="radio" name="size" value="1" />小图</label>
    					<label for="" class="radio inline"><input type="radio" name="size" value="2" />一大两小</label>
    					<label for="" class="radio inline"><input type="radio" name="size" value="3" checked="" />列表</label>
    				</div>
    			</div>
    			<div class="control-group">
    				<label for="" class="control-label">商品名：</label>
    				<div class="control">
    					<label for="" class="radio inline"><input type="checkbox" name="title" value="0" />显示商品名（小图的时候不会显示商品名）</label>
    				</div>
    			</div>    			
    			<div class="control-group">
    				<label for="" class="control-label">价格：</label>
    				<div class="control">
    					<label for="" class="radio inline"><input type="checkbox" name="price" value="0" />显示价格</label>
    					<label for="" class="radio inline"><input type="checkbox" name="price" value="1" />显示购物车图标</label>
    				</div>
    			</div>    			
    			<div class="control-group">
    				<label for="" class="control-label">选择来源：</label>
    				<div class="control">
    					<a class="dialog" href="#" data-appid="goodsDialog">+从商品标签或微杂志中选择</a>
    					<p class="hint">选择商品来源后，左侧实时预览暂不支持显示其包含的商品数据</p>
    				</div>
    			</div>  
    			<div class="control-group">
    				<label for="" class="control-label">显示数量：</label>
    				<div class="control">
    					<label for="" class="radio inline"><input type="radio" name="goods_number_type" value="0" checked="" />6</label>
    					<label for="" class="radio inline"><input type="radio" name="goods_number_type" value="1" />12</label>
    					<label for="" class="radio inline"><input type="radio" name="goods_number_type" value="2" />18</label>
    				</div>
    			</div>    			  			
    		</form>    		
    	</div>     	  	    
    	<!-- 底部菜单	 -->
    	<div class="mobileFooter">
    		<form action="">
    			<h1>mobileFooter</h1>	
    		</form>    		
    	</div>     	  	    	
    </div>
    <!-- 弹窗内容 -->
    <div id="dialogContent">
    	<!-- 商品列表 -->
		<div id="goodsDialog" title="test">
		  <p>This is the default dialog whichth the 'x' icon.</p>
		</div>   
    </div>
    <div id="footer">
        <script src="js/jquery.js?body=1"></script>
        <script src="js/JQueryUI/jquery-ui.min.js?body=1"></script>
        <script src="js/jquery.tmpl.js?body=1"></script>
        <script src="js/draggable.js?body=1"></script>
        <script src="js/less-1.7.0.min.js"></script>
        <script src="js/popover.js"></script>
        <script src="js/dialog-min.js"></script>
    </div>
</body>
</html>